<template>
  <div class="mt5">
    <experiment-table :list="tableData" @refresh="refresh"></experiment-table>
    <div style="padding: 10px;text-align: center;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pageOption.pageSize"
        :total="pageOption.total"
        :page-sizes="pageOption.sizes"
        @size-change="sizeCurrentChange"
        @current-change="pageCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ExperimentTable from './table/ExperimentTable'

import { overviewApis } from "@/apis";
export default {
  props: ["id", "params"],
  components: { ExperimentTable },
  data() {
    return {
      loading: false,
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 20, 30, 40, 50, 100]
      }
    };
  },
  watch: {
     params: {
        handler(){
          this.pageOption.page = 1
          this.progressExperimentFindPageList()
        },
        deep: true 
    }
  },
  mounted() {
    this.progressExperimentFindPageList();
  },
  methods: {
    refresh() {
      this.progressExperimentFindPageList()
      this.$emit('refresh-sub')
    },
    sizeCurrentChange(size) {
      this.pageOption.pageSize = size
      this.progressExperimentFindPageList();
    },
    pageCurrentChange(page) {
      this.pageOption.page = page
      this.progressExperimentFindPageList();
    },
    async progressExperimentFindPageList() {
      const {page, pageSize} = this.pageOption
      this.loading = true
      const { data } = await overviewApis.progressExperimentFindPageList({
        modelId: this.id,
        ...this.params,
        pageNum: page,
        pageSize
      });
      const {list, total} = data
      this.tableData = list.map((item) => {
        return {
          ...item,
          edit: false,
        };
      });
      this.pageOption.total = total
      this.loading = false
    },
  },
};
</script>

<style lang="scss" scoped>
</style>